<template>
  <div>
    <!-- 添加 -->
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="角色名称" prop="RoleName">
            <el-input v-model="form.RoleName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="角色编号" prop="RoleCode">
            <el-input v-model="form.RoleCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <el-form-item label="备注" prop="Remark">
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="form.Remark"
          >
          </el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { Add } from "../../apis/role";
export default {
  //数据
  data() {
    return {
      form: {
        RoleName: "",
        RoleCode: "",
        Remark: "",
      },
      rules: {
        RoleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
        ],
        RoleCode: [
          { required: true, message: "请输入角色编号", trigger: "blur" },
        ],
        Remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
      },
    };
  },
  //方法
  methods: {
    //添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          Add(this.form).then((res) => {
            if (res.Code == 0) {
              //this.$message.success("添加成功");
              this.$message({
                message: "添加成功",
                type: "success",
                onClose: function () {
                  _this.$emit("onAddSuccess");
                },
              });
            } else {
              this.$message.error(res.Message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  //勾子函数
  created() {},
};
</script>
<style>
</style>